<template>
    <div class="audit">
        <!--  课程审核 -->
        <div class="audit-box">
            <div class="audit-box-one">
                <div class="audit-box-one-left"><span></span> &nbsp&nbsp课程审核</div>
                <div class="audit-box-one-right">
                    <el-button class="edit_btn" @click="close"><i class="el-icon-refresh">&nbsp&nbsp刷新</i></el-button>
                </div>
            </div>
            <!-- 商品审核的高级检索 -->
            <div class="audit-box-two">
                <div class="audit-box-two-left"><i class="el-icon-search"></i>&nbsp&nbsp筛选查询</div>
                <div class="audit-box-two-right">
                    <template>
                        <div>
                            <el-button class="edit_btn" @click="dialogSelectQuery">高级检索</el-button>
                            <el-dialog
                                    width="50%"
                                    title="高级检索"
                                    :visible.sync="dialogFormVisible"
                                    append-to-body
                                    class="upload-dialog">
                                <el-row>
                                    <el-form :label-position="labelPosition" label-width="80px" :model="auditProductQuery">
                                        <el-col :span="8">
                                            <el-form-item label="课程发起人：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="auditProductQuery.launchId" placeholder="请选择课程发起人"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8" :offset="5">
                                            <el-form-item label="课程名称：":label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="auditProductQuery.courseName" placeholder="请选择课程名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="课程结果：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="auditProductQuery.result" placeholder="请选择课程结果">
                                                    <el-option label="审核通过" :value="1"></el-option>
                                                    <el-option label="审核未通过" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8" :offset="5">
                                            <el-form-item label="课程备注：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="auditProductQuery.remarks" placeholder="请选择课程备注"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="success" @click="dialogFormVisible = false" class="footer_qx">取消</el-button>
                                    <el-button type="success" v-show="btn_show" @click="handleQuery" class="footer_qd">开始检索</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <!-- 商品的模糊查询 -->
        <div class="audit-mohu">
            <el-form :inline="true" :model="auditProductQuery">
                <el-form-item label="课程名称：">
                    <el-input @keyup.enter.native="likeData" type="text" v-model="auditProductQuery.courseName" placeholder="请选择课程名称"></el-input>
                </el-form-item>
                <el-form-item label="发起人：">
                    <el-input @keyup.enter.native="likeData" v-model="auditProductQuery.launchId" placeholder="请选择课程发起人"></el-input>
                </el-form-item>
                <el-form-item label="课程结果：">
                    <el-select @keyup.enter.native="likeData" v-model="auditProductQuery.result" placeholder="请选择课程结果">
                        <el-option label="审核通过" :value="1"></el-option>
                        <el-option label="审核未通过" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程备注：">
                    <el-input @keyup.enter.native="likeData" v-model="auditProductQuery.remarks" placeholder="请选择课程备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dimSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格头部工具栏-->
        <div class="audit-table">
            <div class="audit-table-one">
                <span><i class="el-icon-s-unfold"></i>数据列表</span>
            </div>
            <!--  实现表格 -->
            <div class="audit-table-two">
                <el-table
                        :data="auditData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
                        border
                        type="selection"
                        :header-cell-style="{background:'#F9FAFC'}"
                        style="width: 1470px"
                        @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <el-table-column
                            type="selection"
                            align="center">
                    </el-table-column>
                    <!-- 编号 -->
                    <el-table-column
                            fixed
                            prop="id"
                            align="center"
                            label="编号"
                            width="130">
                    </el-table-column>
                    <!-- 商品审核图片 -->
                    <el-table-column
                            align="center"
                            label="课程图片"
                            width="130">
                        <template slot-scope="scope" >
                            <el-image :src="scope.row.courseUrl" style="width: 70px;height: 40px;"/>
                        </template>
                    </el-table-column>
                    <!-- 商品名称 -->
                    <el-table-column
                            prop="courseName"
                            align="center"
                            label="课程名称"
                            width="180">
                    </el-table-column>
                    <!-- 发起时间 -->
                    <el-table-column
                            prop="applyDate"
                            align="center"
                            label="发起时间"
                            width="160">
                    </el-table-column>
                    <!-- 发起人 -->
                    <el-table-column
                            prop="launchId"
                            align="center"
                            label="发起人"
                            width="140">
                    </el-table-column>
                    <!-- 执行时间 -->
                    <el-table-column
                            prop="implementDate"
                            align="center"
                            label="执行时间"
                            width="160">
                    </el-table-column>
                    <!-- 结果 -->
                    <el-table-column
                            prop="result"
                            align="center"
                            label="结果"
                            :formatter="shenhe"
                            width="130">
                    </el-table-column>
                    <!-- 备注 -->
                    <el-table-column
                            prop="remarks"
                            align="center"
                            label="备注"
                            width="130">
                    </el-table-column>
                    <!-- 类型 -->
                    <el-table-column
                            prop="type"
                            align="center"
                            label="类型"
                            :formatter="leixing"
                            width="130">
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column
                            align="center"
                            label="操作"
                            width="130">
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogSelect(scope.row)" class="btn">查看</el-button>
                            <el-button type="text" class="btn" @click="dialogSelectAdd(scope.row)">审核</el-button>
                            <!-- 表格弹窗------ 查看 -->
                            <el-dialog
                                    width="50%"
                                    title="商品+课程查看详情"
                                    :visible.sync="dialogFormVisible01"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-row>
                                    <el-form :label-position="labelPosition01" label-width="80px" :model="auditProductQuery">
                                        <el-col :span="9">
                                            <el-form-item label="编号：" :label-width="formLabelWidth">
                                                <el-input v-model="auditProductQuery.id" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="课程名称：":label-width="formLabelWidth">
                                                <el-input v-model="auditProductQuery.courseName" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="发起时间：" :label-width="formLabelWidth">
                                                <el-date-picker
                                                        type="datetime"
                                                        v-model="auditProductQuery.applyDate"
                                                        style="width: 100%;"
                                                        readonly>
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="发起人：" :label-width="formLabelWidth">
                                                <el-input v-model="auditProductQuery.launchId" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="执行时间：" :label-width="formLabelWidth">
                                                <el-date-picker
                                                        type="datetime"
                                                        v-model="auditProductQuery.implementDate"
                                                        style="width: 100%;"
                                                        readonly>
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="类型：" :label-width="formLabelWidth">
                                                <el-select v-model="auditProductQuery.type" style="width:100%">
                                                    <el-option label="视频" :value="2"></el-option>
                                                    <el-option label="商品" :value="3"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="备注：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        readonly
                                                        v-model="auditProductQuery.remarks">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                            </el-dialog>
                            <!-- 表格弹窗------ 审核 -->
                            <el-dialog
                                    width="50%"
                                    title="商品+课程审核详情"
                                    :visible.sync="dialogFormVisible02"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-form :label-position="labelPosition01" label-width="80px" :model="auditProductQuery">
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="课程名称：":label-width="formLabelWidth">
                                                <el-input v-model="auditProductQuery.courseName" readonly class="borderNone"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="课程审核：":label-width="formLabelWidth">
                                                <el-radio-group v-model="auditProductQuery.result">
                                                    <el-radio :label="1">审核通过</el-radio>
                                                    <el-radio :label="2">审核未通过</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="23">
                                            <el-form-item label="反馈详情：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        readonly
                                                        v-model="auditProductQuery.remarks">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div>
                    <el-pagination
                            class="pagination"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[1,2,3,4,5,6,7,8]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="auditData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CourseAudit",
        inject: ['reload'], //注入
        created(){
            //调用全查数据
            this.getAll();
        },
        data(){
            return{
                //弹窗的宽度
                formLabelWidth:"100px",
                //高级检索中的label的样式
                labelPosition:"top",
                //高级检索是否一打开页面弹窗
                dialogFormVisible:false,
                //点击高级检索进去之后在点击开始检索的时候退出来
                btn_show:false,
                //高级检索中的数据（注意数据不要加空格，如果加了空格之后placeholder属性会显示不出来）
                auditProductQuery:{
                    id:"",//课程编号
                    applyDate:"",//发起时间
                    implementDate:"",//执行时间
                    type:"",//类型（2、视频3、商品）
                    launchId:"",//发起人
                    courseName:"",//商品名称
                    result:2,//结果
                    remarks:"",//备注
                },
                //查看按钮是否一打开页面弹窗
                dialogFormVisible01:false,
                //查看按钮中的label样式
                labelPosition01:"left",
                //审核按钮是否一打开页面弹窗
                dialogFormVisible02:false,
                //商品审核中的数据
                auditData:[],
                //复选框(课程)
                multipleSelection: [],
                //分页
                currentPage: 1,//默认的页数
                currentIndex: ' ',
                pagesize: 5,//总条数
            }
        },
        methods:{
            //当点击高级检索的时候弹窗,开始检索的时候出来数据退出来
            dialogSelectQuery(){
                this.dialogFormVisible = true;
                this.btn_show = true;
            },
            //调用高级检索数据的方法
            handleQuery(){
                this.dialogFormVisible = false;
                this.queryData();
            },
            //高级检索数据的方法
            queryData(){
                this.$http.get("/JsCourseRecord/auditProductQuery",{
                    params:{
                        "launchId":this.auditProductQuery.launchId,
                        "courseName":this.auditProductQuery.courseName,
                        "result":this.auditProductQuery.result,
                        "remarks":this.auditProductQuery.remarks
                    }

                }).then(res =>{
                    this.auditData = res.data;
                }).catch(err =>{
                    console.log("高级检索请求数据失败！！！");
                })
            },
            //模糊查询（调用模糊查询数据的方法）
            dimSubmit(){
                this.likeData();
            },
            //模糊查询数据的方法(连接后端)
            likeData(){
                this.$http.get("/JsCourseRecord/dimSubmit",{
                    params:{
                        "launchId":this.auditProductQuery.launchId,
                        "courseName":this.auditProductQuery.courseName,
                        "result":this.auditProductQuery.result,
                        "remarks":this.auditProductQuery.remarks
                    }
                }).then(res =>{
                    this.auditData = res.data
                }).catch(err =>{
                    console.log("模糊查询请求数据失败！！！")
                })
            },
            //查看按钮数据方法 --- 弹窗
            dialogSelect(item){
                this.dialogFormVisible01 = true
                this.auditProductQuery = {
                    id:item.id,
                    applyDate:item.applyDate,
                    implementDate:item.implementDate,
                    type:item.type,
                    launchId:item.launchId,
                    courseName:item.courseName,
                    remarks:item.remarks
                }
            },
            //审核按钮数据的方法 --- 弹窗
            dialogSelectAdd(item){
                this.dialogFormVisible02 = true
                this.auditProductQuery = {
                    courseName:item.courseName,
                    result:item.result,
                    remarks:item.remarks
                }
            },
            //表格的全查数据
            getAll(){
                this.$http.get("/JsCourseRecord/getAll").then(res =>{
                    console.log(res);
                    this.auditData = res.data.data;
                },err =>{
                    alert("table数据请求失败！！！");
                })
            },
            //分页的条数
            handleSizeChange(val){
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            //分页的页数
            handleCurrentChange(val){
                this.currentPage = val
            },
            //复选框中的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //刷新
            close(){
                this.reload();//局部刷新
            },
            //类型
            leixing(row){
                if (row.type == 2){
                    return "视频";
                } else if (row.type == 3){
                    return "商品";
                }
            },
            //结果
            shenhe(row){
                if (row.result == 1){
                    return "审核通过";
                } else if (row.result == 2){
                    return "审核未通过";
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 100px;
    }
    /*分页边框的样式*/
    .pagination{
        padding-top: 10px;
        padding-right: 20px;
        text-align: right;
        background: #FDFDFE;
        width: 1448px;
        height: 40px;
        border: 1px solid #E4E4E4;
    }
    /*弹窗的取消按钮样式*/
    .footer_qx{
        background: #fff;
        border-color: #1ABC9C;
        color: #1ABC9C;
    }
    /*弹窗的确定按钮样式*/
    .footer_qd{
        background: #1ABC9C;
    }
    /*查、改、删、日志按钮的颜色*/
    .btn{
        color: #1ABC9C;
    }
    /*最外边的盒子给它的宽度为1520px*/
    .audit{
        width: 1470px;
    }
    /*我给下面几行包起来了，需要一个高度，要不然下面的模糊查询的高度，会随着它一起动*/
    .audit-box{
        height: 115px;
    }
    /*商品审核需要左浮动*/
    .audit-box-one-left{
        float: left;
        color: #99A4BF;
    }
    /*商品审核需要一个绿色的边框*/
    .audit-box-one-left span{
        border-left: 5px solid #1ABC9C;
    }
    /*刷新等一些按钮需要右浮动*/
    .audit-box-one-right{
        float: right;
        padding-right: 80px;
    }
    /*商品审核及高级筛选的样式*/
    .audit-box-one,.audit-box-two{
        margin-bottom: 15px;
        width: 100%;
        background: #F3F3F3;
        height: 50px;
        line-height: 50px;
        float: right;
    }
    /*筛选查询的左浮动*/
    .audit-box-two-left{
        float: left;
        padding-left: 10px;
        color: #666;
    }
    /*高级检索的右浮动*/
    .audit-box-two-right{
        float: right;
        padding-right: 80px;
    }
    /*模糊查询的边框*/
    .audit-mohu{
        text-align: center;
        width: 1468px;
        background: #FDFDFE;
        border: 1px solid #E4E4E4;
        height: 68px;
        line-height: 35px;
        margin-bottom: 15px;
    }
    /*数据列表*/
    .audit-table{
        width: 1470px;
        background: #F3F3F3;
        height: 50px;
    }
    /*数据列表需要向左浮动*/
    .audit-table-one span{
        float: left;
        color: #666;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
    }
    /*整体表格*/
    .audit-table-two{
        float: left;
        width: 1470px;
    }
    /*input框去掉的方法*/
    .borderNone /deep/ .el-input__inner {
        border: none;
    }
</style>
<style lang="less">
    /*对话框的样式*/
    .dialog-footer{
        border-top: 1px solid #E4E4E4;
        margin-top: -25px;
        padding-top: 15px;
        padding-right: 10px;
    }
    /*对话框按钮的边距*/
    .dialog-footer el-button{
        margin-left: 20px;
    }
    /*对话框标题的样式*/
    .upload-dialog .el-dialog__header{
        border-bottom: 1px solid #E4E4E4;
        background: #F2F2F2;
        font-weight: 700;
    }
    // 覆盖层元素增加可穿透点击事件
    .el-dialog__wrapper{
        pointer-events:none;
    }
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    .el-dialog{
        pointer-events:auto;
    }
</style>